import React, { Component } from 'react';
import CustomForm from '../../../components/CustomForm';
import { Input, message } from 'antd';
import { connect } from 'react-redux';
import services from '../../../services/api';
import DeptSelect from '../../../components/DeptSelect';

@connect(mapStateToProps)
class ApplicationAdd extends Component {
  constructor(props) {
    super(props);
    this.state = {
      depts: [],
      hasRight: [],
    };
    this.actionType = 'add';
    this.form = null;
    this.api = 'application';
  }

  componentDidMount() {
    // this.getDeptAll();
    if (this.actionType === 'update') {
      this.id = this.props.record.app_id;
    }
  }

  // 获取可见部门列表
  // getDeptAll = () => {
  //   services.dept.hasRight().then((res) => {
  //     if (res.code === 0) {
  //       this.setState({
  //         hasRight: res.data,
  //       });
  //     }
  //   });
  // };

  handleSubmit = () => {
    this.form.validateFields((err, values) => {
      if (!err) {
        const params = {
          app_name: values.app_name,
          remark: values.remark,
          dept_ids: values.dept_ids.map((item) => item.value),
        };
        if (this.actionType === 'update') {
          params.app_id = this.id;
        }
        services[this.api][this.actionType](params).then((data) => {
          if (data.code === 0) {
            message.success(data.msg);
            if (this.props.closeModal) {
              this.props.closeModal();
            }
          } else {
            message.error(data.msg);
          }
        });
      }
    });
  };

  render() {
    this.actionType = this.props.actionType;

    const { app_name, remark, dept_arr } = this.props.record || {};

    const formItems = [
      {
        label: {
          label: '渠道名称',
          className: 'tantuer-form-item2 tantuer-form-item-nowrap',
        },
        name: 'app_name',
        options: {
          initialValue: app_name,
          rules: [
            { required: true, message: '请输入渠道名' },
            { max: 128, message: '最长128个字符' },
            { pattern: /^[\u4E00-\u9FA5_a-zA-Z0-9]+$/, message: '限中英文数字下划线' },
          ],
        },
        component: <Input placeholder='渠道名' disabled={this.actionType === 'detail'} />,
      },

      {
        label: {
          label: '描述',
          className: 'tantuer-form-item2 tantuer-form-item-nowrap',
        },
        name: 'remark',
        options: {
          initialValue: remark,
          rules: [{ max: 256, message: '最长256个字符' }],
        },
        component: <Input.TextArea disabled={this.actionType === 'detail'} />,
      },
      DeptSelect({
        treeCheckable: true, // 是否多选
        treeCheckStrictly: true, // 多选时是否取消父子关联
        deptTree: this.props.depts, // 全部部门数据
        deptArr: dept_arr, // 当前部门数据
        hasRight: true, // 是否需要权限展示
        // nodeDisabled: (item) => !item.dept_id, // 节点禁选
        disabled: this.actionType === 'detail',
        form: this.form,
      }),
    ].filter(Boolean);

    return (
      <CustomForm
        {...this.props}
        closeModal={this.props.closeModal}
        createForm={(ref) => (this.form = ref)}
        formItems={formItems}
        onHandleSubmit={this.handleSubmit}
        colNum={1}
        hideSubmit={this.actionType === 'detail'}
        modelId={null}
      />
    );
  }
}

function mapStateToProps(state) {
  return {
    depts: state.global.depts,
  };
}

export default ApplicationAdd;
